<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.32">
    <link rel="icon" href="/favicon.ico"><title>风格指南 | My NoteBook</title><meta name="description" content="基于vuePress2构建的静态文档站点">
    <link rel="modulepreload" href="/assets/app.f187a4c5.js"><link rel="modulepreload" href="/assets/styleGuide.html.0a161704.js"><link rel="modulepreload" href="/assets/plugin-vue_export-helper.21dcd24c.js"><link rel="modulepreload" href="/assets/styleGuide.html.6159493b.js">
    <link rel="stylesheet" href="/assets/style.b5235dab.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header ref_key="navbar" class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="My NoteBook"><span class="site-name can-hide">My NoteBook</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/type/html/html.md" class="" aria-label="文档列表"><!--[--><!--]--> 文档列表 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="专栏"><span class="title">专栏</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="专栏"><span class="title">专栏</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/column/" class="" aria-label="Flask基础知识"><!--[--><!--]--> Flask基础知识 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/column/" class="" aria-label="JWT登录及验证"><!--[--><!--]--> JWT登录及验证 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="资源导航"><span class="title">资源导航</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="资源导航"><span class="title">资源导航</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://www.w3school.com.cn/tags/tag_input.asp" rel="noopener noreferrer" target="_blank" aria-label="W3school"><!--[--><!--]--> W3school <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element" rel="noopener noreferrer" target="_blank" aria-label="MDNdocs"><!--[--><!--]--> MDNdocs <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://time.geekbang.org/" rel="noopener noreferrer" target="_blank" aria-label="极客时间专栏"><!--[--><!--]--> 极客时间专栏 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://juejin.cn/frontend" rel="noopener noreferrer" target="_blank" aria-label="稀土掘金"><!--[--><!--]--> 稀土掘金 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://www.zhihu.com/search?type=content&amp;q=JavaScript" rel="noopener noreferrer" target="_blank" aria-label="知乎搜索"><!--[--><!--]--> 知乎搜索 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-item"><a href="/about/" class="" aria-label="关于本站"><!--[--><!--]--> 关于本站 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/" rel="noopener noreferrer" target="_blank" aria-label="Github"><!--[--><!--]--> Github <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/type/html/html.md" class="" aria-label="文档列表"><!--[--><!--]--> 文档列表 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="专栏"><span class="title">专栏</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="专栏"><span class="title">专栏</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/column/" class="" aria-label="Flask基础知识"><!--[--><!--]--> Flask基础知识 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/column/" class="" aria-label="JWT登录及验证"><!--[--><!--]--> JWT登录及验证 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="资源导航"><span class="title">资源导航</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="资源导航"><span class="title">资源导航</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://www.w3school.com.cn/tags/tag_input.asp" rel="noopener noreferrer" target="_blank" aria-label="W3school"><!--[--><!--]--> W3school <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element" rel="noopener noreferrer" target="_blank" aria-label="MDNdocs"><!--[--><!--]--> MDNdocs <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://time.geekbang.org/" rel="noopener noreferrer" target="_blank" aria-label="极客时间专栏"><!--[--><!--]--> 极客时间专栏 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://juejin.cn/frontend" rel="noopener noreferrer" target="_blank" aria-label="稀土掘金"><!--[--><!--]--> 稀土掘金 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://www.zhihu.com/search?type=content&amp;q=JavaScript" rel="noopener noreferrer" target="_blank" aria-label="知乎搜索"><!--[--><!--]--> 知乎搜索 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-item"><a href="/about/" class="" aria-label="关于本站"><!--[--><!--]--> 关于本站 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/" rel="noopener noreferrer" target="_blank" aria-label="Github"><!--[--><!--]--> Github <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p class="sidebar-item sidebar-heading active">基础 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/installion.html" class="sidebar-item" aria-label="常用安装"><!--[--><!--]--> 常用安装 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="风格指南"><!--[--><!--]--> 风格指南 <!--[--><!--]--></a><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/styleGuide.html#引言" class="router-link-active router-link-exact-active sidebar-item" aria-label="引言"><!--[--><!--]--> 引言 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#适用对象" class="router-link-active router-link-exact-active sidebar-item" aria-label="适用对象"><!--[--><!--]--> 适用对象 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#代码格式" class="router-link-active router-link-exact-active sidebar-item" aria-label="代码格式"><!--[--><!--]--> 代码格式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#编程规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="编程规范"><!--[--><!--]--> 编程规范 <!--[--><!--]--></a><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/styleGuide.html#命名规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="命名规范"><!--[--><!--]--> 命名规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#html规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="HTML规范"><!--[--><!--]--> HTML规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#css规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS规范"><!--[--><!--]--> CSS规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/styleGuide.html#注释规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="注释规范"><!--[--><!--]--> 注释规范 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><!--]--></ul><!--]--></li><li><a href="/guide/eslint.html" class="sidebar-item" aria-label="ESlint"><!--[--><!--]--> ESlint <!--[--><!--]--></a><!----></li><li><a href="/guide/echarts.html" class="sidebar-item" aria-label="图表Echarts"><!--[--><!--]--> 图表Echarts <!--[--><!--]--></a><!----></li><li><a href="/guide/cors.html" class="sidebar-item" aria-label="跨域问题"><!--[--><!--]--> 跨域问题 <!--[--><!--]--></a><!----></li><li><a href="/guide/manager.html" class="sidebar-item" aria-label="包管理工具"><!--[--><!--]--> 包管理工具 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><li><p class="sidebar-item sidebar-heading">进阶 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/installion.html" class="sidebar-item" aria-label="常用安装"><!--[--><!--]--> 常用安装 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="风格指南" tabindex="-1"><a class="header-anchor" href="#风格指南" aria-hidden="true">#</a> 风格指南</h1><div class="custom-container tip"><p class="custom-container-title">Vue项目</p><p>代码风格规范</p></div><h2 id="引言" tabindex="-1"><a class="header-anchor" href="#引言" aria-hidden="true">#</a> 引言</h2><p>软件的长期价值直接源于其编码质量，清晰易理解的代码是编码质量的重要一环，代码应该写成可供他人容易阅读的。</p><p>本文档旨在为前端开发提供基本规范，保持页面规范，提高前端开发人员协作开发的水平。同时减少页面错误、提高系统健壮性。</p><h2 id="适用对象" tabindex="-1"><a class="header-anchor" href="#适用对象" aria-hidden="true">#</a> 适用对象</h2><ul><li>前端开发人员</li></ul><h2 id="代码格式" tabindex="-1"><a class="header-anchor" href="#代码格式" aria-hidden="true">#</a> 代码格式</h2><ul><li>编码为 UTF-8</li><li>缩进使用两个空格</li><li>行尾部不允许存在空格</li></ul><h2 id="编程规范" tabindex="-1"><a class="header-anchor" href="#编程规范" aria-hidden="true">#</a> 编程规范</h2><h3 id="命名规范" tabindex="-1"><a class="header-anchor" href="#命名规范" aria-hidden="true">#</a> 命名规范</h3><h5 id="_1-项目命名" tabindex="-1"><a class="header-anchor" href="#_1-项目命名" aria-hidden="true">#</a> 1，项目命名</h5><p>使用 <strong>短横线 kebab-case</strong> 命名，即全部采用小写方式， 以中划线分隔。</p><ul><li>✔️ <code>web-module-name</code></li><li>❌ <code>web-module_name / webModuleName</code></li></ul><h5 id="_2-目录命名" tabindex="-1"><a class="header-anchor" href="#_2-目录命名" aria-hidden="true">#</a> 2，目录命名</h5><p>使用kebab-case命名，即全部采用小写方式， 以中划线分隔，有复数结构时，不采用复数命名法，不要使用缩写。</p><ul><li>✔️ <code>component / page / config / model / user-select</code></li><li>❌ <code>components / province-city_select / userSelect / doc</code></li></ul><h5 id="_3-文件命名" tabindex="-1"><a class="header-anchor" href="#_3-文件命名" aria-hidden="true">#</a> 3，文件命名</h5><p>使用kebab-case命名，即全部采用小写方式， 以中划线分隔，有复数结构时，不采用复数命名法，不要使用缩写。</p><ul><li>✔️ <code>condition-form.vue / index.html / header-logo.png / custom-style.css</code></li><li>❌ <code>conditionForm.vue / headerLogo.png</code></li></ul><h4 id="_4-html命名" tabindex="-1"><a class="header-anchor" href="#_4-html命名" aria-hidden="true">#</a> 4，html命名</h4><p>在vue的template模板中使用组件，应使用kebab-case模式。</p><ul><li>✔️<code>&lt;my-component /&gt;</code></li><li>❌ <code>&lt;MyComponent /&gt;</code></li></ul><h4 id="_5-css命名" tabindex="-1"><a class="header-anchor" href="#_5-css命名" aria-hidden="true">#</a> 5，css命名</h4><p>使用BEM命名方法进行命名。BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰） 不同状态的修饰符。</p><ul><li>✔️ <code>article-header--hover / article-body</code></li><li>❌ <code>articleHeader / article-header-hover</code></li></ul><h4 id="_6-javascript命名" tabindex="-1"><a class="header-anchor" href="#_6-javascript命名" aria-hidden="true">#</a> 6，JavaScript命名</h4><p>6.1. 事件函数命名需要加 <code>on 前缀</code>以标识此函数是事件处理函数。</p><ul><li>✔️ <code>onSearchButtonClick</code></li><li>❌ <code>priceChange</code></li></ul><p>6.2. 除此之外的其他函数命名必须是 <code>动词+名词</code> 形式。</p><ul><li>✔️ <code>saveUserInfo / openUserSelectDialog</code></li><li>❌ <code>click / change</code></li></ul><p>6.3. 特此说明：增删查改详情推荐统一使用如下5个单词。</p><ul><li>✔️ <code>add / update / delete / detail / get</code></li></ul><p>6.4. 控制组件显示/不显示的变量后缀名使用 <code>visible</code>，可用 / 不可用的变量后缀名使用<code>disabled</code>。</p><h3 id="html规范" tabindex="-1"><a class="header-anchor" href="#html规范" aria-hidden="true">#</a> HTML规范</h3><ol><li>不允许定义id属性。</li><li>属性的值使用双引号括起来，不允许使用单引号。</li></ol><ul><li>✔️ <code>type=&quot;primary&quot;</code></li><li>❌ <code>type=&#39;primary&#39;</code></li></ul><h3 id="css规范" tabindex="-1"><a class="header-anchor" href="#css规范" aria-hidden="true">#</a> CSS规范</h3><ol><li>禁止使用ID选择器。</li><li>禁止出现标签名。</li></ol><ul><li>✔️ <code>.menu &gt; .menu-item</code></li><li>❌ <code>.menu &gt; li</code></li></ul><ol start="3"><li>每个选择器及属性独占一行。</li><li>禁止使用<code>!important</code>。</li></ol><h3 id="注释规范" tabindex="-1"><a class="header-anchor" href="#注释规范" aria-hidden="true">#</a> 注释规范</h3><p>必须添加注释的地方：</p><ul><li>公共组件必须添加注释。</li><li>调用api接口的函数必须添加注释（服务描述，url，参数类型，返回值等）。</li><li>vue文件中的method要添加注释。</li><li>vue文件中的data，复杂单词或非常见的单词要添加注释。</li></ul><h4 id="component单文件组件" tabindex="-1"><a class="header-anchor" href="#component单文件组件" aria-hidden="true">#</a> component单文件组件</h4><p>所有的<code>Component</code>文件都是以短横线连接 (kebab-case)，这也是官方所<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" target="_blank" rel="noopener noreferrer">推荐的<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a>。</p><ul><li><code>@/components/contract-search.vue</code></li><li><code>@/components/contract-detail.vue</code></li><li><code>@/components/contract-main-info.vue</code></li></ul><h4 id="js文件" tabindex="-1"><a class="header-anchor" href="#js文件" aria-hidden="true">#</a> JS文件</h4><p>所有的<code>.js</code>文件都推荐短横线连接 (kebab-case)。</p><ul><li><code>@/js/contract-mgr-constants.js</code></li><li><code>@/js/contract-mgr-service.js</code></li><li><code>@/js/contract-mgr-util.js</code></li></ul><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 18223709968@163.com">魏波968</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/installion.html" class="" aria-label="常用安装"><!--[--><!--]--> 常用安装 <!--[--><!--]--></a></span><span class="next"><a href="/guide/eslint.html" class="" aria-label="ESlint"><!--[--><!--]--> ESlint <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app.f187a4c5.js" defer></script>
  </body>
</html>
